:host {
  display: block;
}

.td-json-formatter-wrapper {
  padding-top: 2px;
  padding-bottom: 2px;

  .td-key {
    // [layout]
    box-sizing: border-box;
    display: flex;
    // [layout="row"]
    flex-direction: row;
    // [layout-align="start center"]
    align-items: flex-start;
    align-content: center;
    max-width: 100%;
    justify-content: flex-start;

    &.td-key-node {
      &:hover {
        cursor: pointer;
      }
    }
  }

  .td-object-children {
    &.ng-animating {
      overflow: hidden;
    }

    & .td-key,
    & .td-object-children {
      padding-left: 24px;

      ::ng-deep [dir='rtl'] & {
        padding-right: 24px;
        padding-left: 0;
      }

      &.td-key-leaf {
        padding-left: 48px;

        ::ng-deep [dir='rtl'] & {
          padding-right: 48px;
          padding-left: 0;
        }
      }
    }
  }

  .value {
    margin-left: 5px;

    ::ng-deep [dir='rtl'] & {
      padding-right: 5px;
      padding-left: 0;
    }

    .td-empty {
      opacity: 0.5;
      text-decoration: line-through;
    }

    .string {
      word-break: break-word;
    }

    .date {
      word-break: break-word;
    }
  }
}
